<template>
  <div class="wrap">
    <pro-table
      ref="proTableInst"
      tableTitle="{{ cname }}列表"
      :columns="columns"
      :request="fetch{{ bigName }}Page"
    >
      <template #operation>
        <n-space>
          <n-button type="primary" @click="handleAdd{{ bigName }}">
            新增
          </n-button>
        </n-space>
      </template>
    </pro-table>

    {{#if isDrawer}}
    <n-drawer
      v-model:show="{{ smallName }}{{ popType }}"
      :width="500"
      resizable
      :mask-closable="false"
      @after-leave="reset{{ bigName }}Form"
    >
      <n-drawer-content closable :title="handleTag">
        <pro-form
          ref="{{ smallName }}FormInst"
          v-model:form="{{ smallName }}Form"
          :options="{{ smallName }}FormOptions"
          :formProps="{
            labelPlacement: 'left'
          }"
        ></pro-form>

        <template #footer>
          <n-space>
            <n-button @click="{{ smallName }}{{ popType }} = false">取消</n-button>
            <n-button type="primary" :loading="confirmLoading" @click="{{ smallName }}Confirm">
              确认
            </n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
    {{/if}}
    {{#if isModal}}
    <pro-dialog
      v-model:showDialog="{{ smallName }}{{ popType }}"
      :modalProps="modalProps"
      :width="1000"
      :showButton="true"
      confirmButtonText="确定"
      cancelButtonText="取消"
      :contentStyle="{ 'padding-left': '10px', 'padding-right': '10px' }"
      :button-loading="confirmLoading"
      @handleConfirm="{{ smallName }}Confirm"
      @afterClosed="reset{{ bigName }}Form"
      v-bind="$attrs"
    >
      <pro-form
        ref="{{ smallName }}FormInst"
        v-model:form="{{ smallName }}Form"
        :formProps="{
          labelPlacement: 'left',
          labelWidth: '100px'
        }"
        :options="{{ smallName }}FormOptions"
      ></pro-form>
    </pro-dialog>
    {{/if}}
  </div>
</template>

<script lang="ts" setup name="{{ bigName }}">
  import { ProTableInst } from '@/components/pro-table/type'
  import { ProFormInst } from '@/components/pro-form/type'
  import {
    use{{ bigName }}Api,
    use{{ bigName }}ProForm,
    use{{ bigName }}ProTable
  } from './hooks'
  import { {{ bigName }}Model } from '@/api/model/{{ fileName }}-model'

  const proTableInst = ref<ProTableInst | null>(null)
  const {{ smallName }}FormInst = ref<ProFormInst | null>(null)

  const {{ smallName }}{{ popType }} = ref(false)
  const handleType = ref<'add' | 'edit' | ''>('')
  const handleTag = computed(() =>
    handleType.value === 'add' ? '新增{{ cname }}' : '修改{{ cname }}'
  )
  const modalProps = computed(() => {
    return {
      showIcon: false,
      title: handleTag.value
    }
  })
  const { {{ smallName }}Form, reset{{ bigName }}Form, {{ smallName }}FormOptions } =
    use{{ bigName }}ProForm()

  const handleAdd{{ bigName }} = () => {
    handleType.value = 'add'
    {{ smallName }}{{ popType }}.value = true
  }

  const handleEdit{{ bigName }} = (row: {{ bigName }}Model) => {
    {{ smallName }}Form.value = row
    handleType.value = 'edit'
    {{ smallName }}{{ popType }}.value = true
  }

  const {{ smallName }}Confirm = async () => {
    if (await {{ smallName }}FormInst.value?.handleSubmit()) {
      fetchAddOrEdit{{ bigName }}()
    }
  }

  const {
    fetch{{ bigName }}Page,
    fetchAddOrEdit{{ bigName }},
    fetchDel{{ bigName }},
    confirmLoading
  } = use{{ bigName }}Api({
    handleType,
    handleTag,
    {{ smallName }}{{ popType }},
    {{ smallName }}Form,
    proTableInst
  })
  const { columns } = use{{ bigName }}ProTable({
    handleEdit{{ bigName }},
    fetchDel{{ bigName }}
  })
</script>

<style lang="less" scoped></style>
